<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>问题一响应式原理</title>
</head>
<body>
  <div id="app"></div>
</body>
<script>
  let data = [1, 2, 3]
  let originalArray = Array.prototype // 数组原来的方法
  // Object.create的方法 使用originalArray作为原型，来创建一个新的对象
  let arrayMethods = Object.create(originalArray) // 创建一个新对象

  function defineReactive(obj) {
    arrayMethods.push = function (...args) { // 函数劫持
      originalArray.push.call(this, ...args)
      render()
    }
    obj.__proto__ = arrayMethods // 
  }

  defineReactive(data) // 将对象的属性 响应式化
  function render () {
    app.innerHTML = data
  }
  render()
  setTimeout(() => {
    data.push(4)
  }, 1000)
</script>
</html>